<template>
    <div v-auto-resize ref="chartEl" class="chart-wrap" />
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartKeyIndicator',
  mixins: [EchartsBase],
  directives: {
    AutoResize
  },
  data () {
    return {
    }
  },
  created () {
    this.$nextTick().then(() => {
      oChart = echarts.init(this.$refs.chartEl)
      this.setOption()
    })
  },
  methods: {
    setOption () {
      const axisBasic = {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E9EBF1',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        }
      }
      const option = {
        color: ['#5f3cfd', '#7456fc', '#9e86ff', '#e5d8fd', '#F7D2FF', '#fae4ff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999999'
            }
          }
        },
        legend: {
          top: '2%',
          left: '2%',
          data: ['新用户', '老用户']
        },
        grid: {
          left: '1%',
          top: '18%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            show: false
          },
          ...axisBasic
        },
        yAxis: {
          type: 'value',
          name: '浏览量(PV)',
          nameTextStyle: {
            align: 'reight',
            color: '#212529'
          },
          min: 0,
          max: 1050,
          interval: 150,
          axisLabel: {
            color: '#333',
            formatter: '{value} 一 '
          },
          axisLine: {
            lineStyle: {
              color: '#E9EBF1'
            }
          },

          ...axisBasic
        },
        series: [
          {
            name: '新用户',
            stack: '总量',
            type: 'line',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '老用户',
            stack: '总量',
            type: 'line',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }
        ]
      }
      oChart.setOption(option)
    }
  }
}
</script>

<style scoped>
    .chart-wrap {
        width: 100%;
        height: 100%;
    }
</style>
